---
import Layout from '../layouts/Layout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import HeroSection from '../components/HeroSection.astro';

import openAuthProLogo from '../assets/openauthpro.png';
---

<Layout title="常见问题 - OpenAuth.Net">
  <Header />
  <main>
    <HeroSection 
      title="常见问题解答" 
      highlightText="问题"
      description="获取关于OpenAuth.Net和我们服务的常见问题解答。"
    />
    
    <section class="py-8 bg-white dark:bg-gray-800">
      <div class="container-custom">
        <div class="max-w-4xl mx-auto">
          <!-- FAQ Categories Navigation -->
          <div class="flex flex-wrap justify-center gap-4 mb-12">
            <a href="#general" class="px-4 py-2 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400 font-medium text-sm hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors">
              常规问题
            </a>
            <a href="#pricing" class="px-4 py-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium text-sm hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
              价格与套餐
            </a>
            <a href="#features" class="px-4 py-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium text-sm hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
              功能特性
            </a>
            <a href="#support" class="px-4 py-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium text-sm hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
              技术支持
            </a>
          </div>
          
          <!-- General FAQs -->
          <div id="general" class="mb-16">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-8 flex items-center">
              <span class="inline-block rounded-full bg-primary-100 dark:bg-primary-900 p-2 mr-3">
                <svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </span>
              常规问题
            </h2>
            
            <div class="space-y-6">
              <div class="card p-6 border border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">OpenAuth.Net是什么？</h3>
                <p class="text-gray-600 dark:text-gray-300">
                  OpenAuth.Net是一套完全开源的基于.Net的权限管理及快速开发框架、包含工作流审批功能。源于Martin Fowler企业级应用开发思想及最新技术组合（SqlSugar、EF、Quartz、AutoFac、WebAPI、Swagger、Mock、NUnit、Vue2/3、Element-ui/plus、IdentityServer等）。核心模块包括：角色授权、代码生成、API鉴权、智能打印、表单设计、工作流、定时任务等。你可以完全免费使用。
                </p>
              </div>
              
              <div class="card p-6 border border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">OpenAuth.Net收费版是什么？</h3>
                <p class="text-gray-600 dark:text-gray-300">
                  付费版是一套全新的前端界面，基于vue2 + element-ui /vue3 + element-plus，采用VUE全家桶（VUE+VUEX+VUE-ROUTER）单页面SPA开发。它使用开源版OpenAuth.Net的API接口（即：OpenAuth.WebApi）提供数据服务。二者的关系如下：
                  <br>
                  <img src={openAuthProLogo.src} alt="OpenAuth.Net收费版" class="w-full">
                  <br>
                  具体效果区别，详见<a href="/case-study" class="text-primary-600 dark:text-primary-400 hover:underline">演示页面</a>。
                </p>
              </div>
              
            </div>
          </div>
          
          <!-- Pricing & Plans FAQs -->
          <div id="pricing" class="mb-16">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-8 flex items-center">
              <span class="inline-block rounded-full bg-primary-100 dark:bg-primary-900 p-2 mr-3">
                <svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </span>
              价格与套餐
            </h2>
            
            <div class="space-y-6">
              <div class="card p-6 border border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">OpenAuth.Net如何收费？</h3>
                <p class="text-gray-600 dark:text-gray-300">
                  开源版本可以免费使用，如果你想使用商业版本，我们提供多种定价方案：标准版、专业版、企业版。详见<a href="/pricing" class="text-primary-600 dark:text-primary-400 hover:underline">定价页面</a>。
                </p>
              </div>
              
            </div>
          </div>
          
          <div class="text-center mt-16">
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">还有其他问题？</h3>
            <p class="text-gray-600 dark:text-gray-300 mb-8">
              我们的团队随时为您服务，请随时联系我们。
            </p>
            <a href="/contact" class="btn-primary">联系支持</a>
          </div>
        </div>
      </div>
    </section>
  </main>
  <Footer />
</Layout>

<style>
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors;
  }
  
  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors;
  }
</style> 
